<template>
  <e-charts class="chart" :option="option" />
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 用电量区间定义
const LowUsage = 100;
const ModerateUsage = 300;
const HighUsage = 600;
const VeryHighUsage = 800;
const ExtremeUsage = 1000; // 新增极高用电量上限

// 颜色映射配置
const colorMap = [
  { value: LowUsage, color: 'lightblue', label: '低用电量' },
  { value: ModerateUsage, color: 'green', label: '中等用电量' },
  { value: HighUsage, color: 'orange', label: '高用电量' },
  { value: VeryHighUsage, color: 'red', label: '非常高用电量' },
  { value: ExtremeUsage, color: 'darkred', label: '极高用电量' }
];

const option = ref({
  title: {
    text: '家庭一天用电量分布',
    subtext: '模拟数据'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    formatter: (params) => {
      const param = params[0];
      const time = param.name;
      const value = param.value;
      const colorItem = colorMap.find(item => value <= item.value);
      return `${time}<br/>用电量: ${value}W<br/>用电状态: ${colorItem.label}`;
    }
  },
  toolbox: {
    show: true,
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [
      '00:00', '01:15', '02:30', '03:45', '05:00',
      '06:15', '07:30', '08:45', '10:00', '11:15',
      '12:30', '13:45', '15:00', '16:15', '17:30',
      '18:45', '20:00', '21:15', '22:30', '23:45'
    ]
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} W'
    },
    axisPointer: {
      snap: true
    }
  },
  visualMap: {
    show: true,
    type: 'piecewise',
    orient: 'horizontal',
    bottom: 10,
    left: 'center',
    pieces: colorMap.map(item => ({
      lte: item.value,
      gt: item === colorMap[0] ? -ExtremeUsage : colorMap[colorMap.indexOf(item) - 1].value,
      color: item.color,
      label: item.label
    }))
  },
  series: [
    {
      name: '实时用电量',
      type: 'line',
      smooth: true,
      data: [],
      lineStyle: {
        color: 'rgba(255, 255, 0, 0.7)'
      },
      itemStyle: {
        color: 'yellow'
      }
    },
    {
      name: '平均用电量',
      type: 'bar',
      data: [],
      itemStyle: {
        color: ({ value }) => {
          const colorItem = colorMap.find(item => value <= item.value);
          return colorItem.color;
        }
      },
      barWidth: 20
    }
  ]
});

// 生成符合家庭用电情况的随机数据，增加极端场景概率
const generateRandomData = () => {
  const data = [];
  for (let i = 0; i < 20; i++) {
    let value;

    // 凌晨时段：低用电量为主，偶尔出现中等
    if (i < 5) {
      if (Math.random() < 0.9) { // 90%概率低用电
        value = Math.floor(Math.random() * LowUsage);
      } else { // 10%概率中等用电
        value = Math.floor(Math.random() * (ModerateUsage - LowUsage) + LowUsage);
      }
    }
    // 白天时段：中等用电量为主，偶尔出现高或非常高
    else if (i < 15) {
      const rand = Math.random();
      if (rand < 0.7) { // 70%概率中等用电
        value = Math.floor(Math.random() * (ModerateUsage - LowUsage) + LowUsage);
      } else if (rand < 0.95) { // 25%概率高用电
        value = Math.floor(Math.random() * (HighUsage - ModerateUsage) + ModerateUsage);
      } else { // 5%概率非常高用电
        value = Math.floor(Math.random() * (VeryHighUsage - HighUsage) + HighUsage);
      }
    }
    // 晚上时段：高用电量为主，经常出现非常高，偶尔出现极高
    else {
      const rand = Math.random();
      if (rand < 0.5) { // 50%概率高用电
        value = Math.floor(Math.random() * (HighUsage - ModerateUsage) + ModerateUsage);
      } else if (rand < 0.9) { // 40%概率非常高用电
        value = Math.floor(Math.random() * (VeryHighUsage - HighUsage) + HighUsage);
      } else { // 10%概率极高用电
        value = Math.floor(Math.random() * (ExtremeUsage - VeryHighUsage) + VeryHighUsage);
      }
    }

    data.push(value);
  }
  return data;
};

// 更新数据
const updateData = () => {
  const newData = generateRandomData();
  const newData2 = generateRandomData();
  option.value.series[0].data = newData;
  option.value.series[1].data = newData2;
};

onMounted(() => {
  // 初始数据
  updateData();

  // 每5秒更新一次数据
  setInterval(() => {
    updateData();
  }, 5000);
});
</script>

<style>
.chart {
  height: 400px;
}
</style>
